<template>
  <div class="call-free-dialog">
    <el-dialog
      :title="visible.type===0? '添加支持币种':'修改支持币种'"
      :visible.sync="visible.showSetDialog"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <div class="content">
        <div class="line flex-left">
          <label class="title">币种</label>
          <el-select
            v-model="param.currency"
            placeholder="请选择币种"
            class="fee-line"
            v-if="visible.type===0"
          >
            <el-option
              v-for="item in tokens"
              :key="item.coin_id"
              :label="item.show_name"
              :value="item.currency"
            ></el-option>
          </el-select>
          <span v-else>{{param.currency}}</span>
        </div>
        <div class="line flex-left">
          <el-select v-model="param.call_money" class="title" style="margin:0">
            <el-option
              v-for="item in feeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span class="ico">=</span>
          <el-input v-model.number="param.currency_amount" placeholder="请输入兑换数量" class="fee-line"></el-input>
          <span>{{param.currency}}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible.showSetDialog = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
          :disabled="onSubmit"
          :loading="onSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addSupToken, editSupToken } from "../../views/Dapp/Dapp.service.js";
export default {
  props: ["visible", "tokens"],
  data() {
    return {
      param: {
        call_money: "10.00",
        currency_amount: "",
        currency: "",
        id: ""
      },
      onSubmit: false,
      feeList: [
        { label: "10话费", value: "10.00" },
        { label: "20话费", value: "20.00" },
        { label: "30话费", value: "30.00" },
        { label: "50话费", value: "50.00" },
        { label: "100话费", value: "100.00" },
        { label: "200话费", value: "200.00" }
      ]
    };
  },
  watch: {
    visible: {
      handler(item) {
        if (item.type === 1) {
          console.log(item);
          this.param.currency = item.data.currency;
          this.param.call_money = item.data.items[0].call_money;
          this.param.currency_amount = item.data.items[0].currency_amount;
          let newFeeList = [];
          item.data.items.forEach(item => {
            this.feeList.forEach(data => {
              if (item.call_money === data.value)
                newFeeList.push({ ...data, ...{ id: item.id } });
            });
          });
          this.feeList = newFeeList;
        }
        if (item.showSetDialog === false) {
          this.param = {
            call_money: "10.00",
            currency_amount: "",
            currency: ""
          };
          this.feeList = [
            { label: "10话费", value: "10.00" },
            { label: "20话费", value: "20.00" },
            { label: "30话费", value: "30.00" },
            { label: "50话费", value: "50.00" },
            { label: "100话费", value: "100.00" },
            { label: "200话费", value: "200.00" }
          ];
        }
      },
      deep: true
    }
  },
  methods: {
    async submit() {
      if (this.visible.type === 1)
        this.feeList.forEach(item => {
          if (item.value === this.param.call_money) this.param.id = item.id;
        });
      const res =
        this.visible.type === 0
          ? await addSupToken(this.param)
          : await editSupToken(this.param);
      if (res.code === 1) {
        this.$notify.success({
          title: "提示",
          message: this.visible.type === 0 ? "添加成功" : "编辑成功"
        });
        this.visible.showSetDialog = false;
        this.$emit("success");
      }
    }
  }
};
</script>

<style lang="scss">
.call-free-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    font-weight: 600;
  }
  .content {
    .line {
      line-height: 60px;
      .title {
        width: 8em;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
      span {
        margin-left: 20px;
      }
      .ico {
        margin: 0 5px;
      }
    }
    .fee-line {
      width: 350px;
    }
  }
}
</style>